<template>
  <div class="home">
    <el-row type="flex" style="width: 100%; height: 100%">
      <el-col :span="24">
        <el-container id="el-container">
          <el-header height="10vh">
            <div class="home-top">
              <div class="home-left">
                <img src="../assets/logo.png" alt="" />
              </div>
              <div class="home-right">
                <el-badge v-if="number != 0" :value="number" class="item">
                </el-badge>
                <!-- <el-link :underline="false">搜索</el-link> -->
                <el-link :underline="false" @click="toMessage">消息</el-link>
                <el-link :underline="false" @click="loginOut">注销</el-link>
              </div>
            </div>
          </el-header>
          <el-container id="el-container2">
            <el-aside width="225px">
              <div class="elaside">
                <el-scrollbar style="height: 100%">
                  <el-menu
                    :default-active="defaultActiveIndex"
                    class="el-menu-vertical-demo"
                    background-color="#366CB3"
                    text-color="#FFFFFF"
                    router
                    active-text-color="#ffd04b"
                    style="height:100%"
                  >
                    <div id="yuan">
                      <span class="span-yuan">
                        {{ userInfo.name }}
                      </span>
                    </div>
                    <el-submenu index="reportwork" style="padding-top: 7.5%">
                      <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>报工</span>
                      </template>
                      <el-menu-item index="addwork">报工填报</el-menu-item>
                      <el-menu-item index="makework" v-if="isWorker"
                        >报工确认</el-menu-item
                      >
                      <el-menu-item index="worksetting" v-if="isAdmin"
                        >报工管理</el-menu-item
                      >
                    </el-submenu>
                    <el-menu-item index="message">
                      <template slot="title">
                        <i class="el-icon-bell"></i>
                        <span>消息</span>
                      </template>
                    </el-menu-item>
                    <el-menu-item index="creategroup" v-if="isTimeAdmin">
                      <template slot="title">
                        <i class="el-icon-s-custom"></i>
                        <span>群组</span>
                      </template>
                    </el-menu-item>
                    <el-menu-item index="task" v-if="isWorker">
                      <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>任务</span>
                      </template>
                    </el-menu-item>
                    <el-submenu index="statistics">
                      <template slot="title">
                        <i class="el-icon-s-data"></i>
                        <span>统计</span>
                      </template>
                      <el-menu-item index="staproject"
                        >根据项目统计</el-menu-item
                      >
                      <el-menu-item index="statask">根据任务统计</el-menu-item>
                      <el-menu-item index="stataskman"
                        >根据填报人统计</el-menu-item
                      >
                      <el-menu-item index="stapassman"
                        >根据审批人统计</el-menu-item
                      >
                      <el-menu-item index="stagrouptype"
                        >根据群类型统计</el-menu-item
                      >
                    </el-submenu>
                    <el-submenu index="systemconfig" v-if="isAdmin">
                      <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>系统配置</span>
                      </template>
                      <el-menu-item index="workKind">工作分类</el-menu-item>
                      <el-menu-item index="grouptype">群组分类</el-menu-item>
                      <el-menu-item index="project">项目管理</el-menu-item>
                    </el-submenu>
                  </el-menu>
                </el-scrollbar>
              </div>
            </el-aside>

            <el-main>
              <div class="elmain">
                <router-view></router-view>
              </div>
            </el-main>
          </el-container>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as api from "@/js/workTimeApi";
export default {
  inject: ["reload"],
  name: "Home",
  data() {
    return {
      userInfo: {},
      message: [],
      number: 0,
      defaultActiveIndex: "addwork",
      isAdmin: false,
      isWorker: false,
      isTimeAdmin: false,
    };
  },
  methods: {
    toMessage() {
      this.$router.push("message");
    },
    loginOut() {
      sessionStorage.clear();
      const url = window.location.href;
      window.document.location.href = url.substring(0, url.indexOf("#"));
    },
    //初始化权限
    initUserPower() {
      api.initUserPower().then((res) => {
        console.log(res.data)
        if (res.data.indexOf("管理员功能") > -1 || res.data.indexOf("工时系统管理") > -1) {
          this.isAdmin = true;
          this.isTimeAdmin = true;
        }
        if (res.data.indexOf("工时审批") > -1) {
          this.isWorker = true;
        }
        if(res.data.indexOf("工时系统管理") > -1){
          this.isTimeAdmin = true;
        }
      });
    },
    //消息计数
    messageNumber() {
      this.number = 0;
      api.getNormalUserMessage({ makeStatus: false }).then((res) => {
        this.number += res.data.rows.length;
      });
      api.getPowerUserMessage().then((res) => {
        this.number += res.data.rows.length;
      });
    },
  },
  watch: {
    $route(to) {
      // console.log(to.name);
      this.defaultActiveIndex = to.name;
    },
  },
  mounted() {
    this.defaultActiveIndex = window.location.href.split("/")[3];
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    //  console.log(this.userInfo)
    this.messageNumber();
    this.initUserPower();
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
.home-top {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-left {
  width: 15%;
  height: 80%;
  img {
    width: 100%;
    height: 100%;
  }
}
.home-right {
  width: 120px;
  height: 60px;
  line-height: 60px;
  margin-right: 1%;
  position: relative;
  .el-link {
    margin-left: 25px;
    font-weight: bold;
    color: #aaaaaa;
  }
  .item {
    position: absolute;
    margin-left: 45px;
  }
}
#el-container {
  width: 100%;
  height: 100%;
}
#el-container2 {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: #ffffff;
  width: 100%;
  height: 100px;
}
.el-aside {
  height: 90vh;
}
.elaside {
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
  padding-top: 12.5%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
}
.el-menu-item.is-active {
  background-color: #305e9b !important;
}
.el-menu-item {
  i {
    color: #ffffff;
  }
  span {
    font-size: 18px;
  }
}
.el-submenu {
  i {
    color: #ffffff;
  }
  span {
    font-size: 18px;
  }
  .el-menu-item {
    font-size: 18px;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.el-main {
  background-color: #f6fafc;
  color: #333;
  height: 90vh;
  padding-top: 0;
  max-height: 100%;
  overflow: auto;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.elmain {
  background-color: #f6fafc;
  color: #333;
  width: 100%;
}
#yuan {
  text-align: center;
  margin: 0px auto;
}
.span-yuan {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  background: #244369;
  box-shadow: -5px -5px 15px rgb(55, 55, 55);
  text-align: center;
  line-height: 100px;
  color: white;
}
</style>
<style>
.home .el-submenu__title i {
  color: #ffffff;
}
.home .el-scrollbar__view{
  height: 100%;
}
.home .el-scrollbar__wrap{
  overflow: auto;
  height: 100%;
}
</style>

